// 封装监听目标元素进入视口的通用逻辑
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export function useObserver(apiFn) {
    // 监听的目标对象
    const target = ref(null)
        // stop 是一个可执行的方法 调用就会停止监听
        // 不管元素进入还是离开视口区域都不会再执行回调函数
        // 注意：不会只监听一次  只有进入视口或者离开视口回调函数都会执行
    const { stop } = useIntersectionObserver(
        // 监听目标元素
        target,
        ([{ isIntersecting }], observerElement) => {
            // isIntersecting 布尔值 代表当前监听的元素是否进入视口区域
            console.log(isIntersecting)
                // ...判断  一旦为true 就发送ajax
            if (isIntersecting) {
                // 关闭监控是否进入视口
                stop()
                    // 发起网络请求
                apiFn()
            }
        },
        // 进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
        { threshold: 0 }
    )
    return {
        target
    }
}